<template>
    <div>
<!--        我的课程{{activeCourse}}{{subject_id}}{{subject_name}}{{tabActiveName}}-->
        <el-tabs v-model="tabActiveName" @click="upCourseName" class="demo-tabs">
            <el-tab-pane v-for="item in tabList" :label="item.name" :name="String(item.id)">
                <el-collapse v-for="item in videoChapter" accordion>
                    <!--                                    {{item.id}}{{data.chapterID}}-->
                    <el-collapse-item :title="item.name" :name="item.id">
                        <div class="course-title" v-if="item.courseVideos.length" v-for="children in item.courseVideos">
                            <div class="course-item" @click="toVideo(children)">
                                <!--                                                {{children.chapterID}}{{$route.params.vid}}-->
                                <div style="display: flex;align-items: center">
                                  <el-icon><VideoCamera /></el-icon><span class="name">&nbsp;{{children.name}}</span>
                                </div>
                                <div>
                                    <span class="time" style="margin-right: 20px">观看时长：{{proxy.$filters.timeFormat(children.watchTime)}}</span>
                                    <span class="time">视频时长：{{proxy.$filters.timeFormat(children.duration)}}</span>
                                </div>
                            </div>
                        </div>
                        <el-collapse v-else-if="item.subsections.length" v-for="children in item.subsections" accordion>
                            <el-collapse-item style="margin-left: 20px" :title="children.name" :name="children.id">
                                <!--                                                {{children}}-->
                                <div  class="course-title" v-if="children.courseVideos.length" v-for="son in children.courseVideos">
                                    <div class="course-item" @click="toVideo(son)">
                                        <!--                                                        {{son.chapterID}}{{$route.params.vid}}-->
                                        <div style="display: flex;align-items: center">
                                          <el-icon><VideoCamera /></el-icon><span class="name">&nbsp;{{son.name}}</span>
                                        </div>
                                        <div>
                                            <span class="time" style="margin-right: 20px">已学习时长：{{proxy.$filters.timeFormat(son.watchTime)}}</span>
                                            <span class="time">视频时长：{{proxy.$filters.timeFormat(son.duration)}}</span>
                                        </div>
                                    </div>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-collapse-item>
                </el-collapse>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import {toRefs, reactive, watchEffect,watch,getCurrentInstance} from 'vue'
    import {videoChapter, videoMyCoursesList} from "../../../api/api";
    import {useRouter} from "vue-router";

    export default {
        name: "index",
        props: {
            subject_id: {
                type: Number,
                default: 0
            },
            subject_name: {
                type: String,
                default: ''
            },
            activeCourse:{
                type:String
            }
        },
        setup(props, {emit}) {
            let data = reactive({
                subjectName:'',
                videoChapter: [],
                activeName: '',
                tabActiveName: '',
                tabList: []
            })
            let router = useRouter();
            const { proxy } = getCurrentInstance()
            let getVideoChapter = () => {
                videoChapter({subjectID: data.tabActiveName}).then(res => {
                    console.log('视频列表',res)
                    data.videoChapter = res.data.chapters
                })
            }
            // getVideoChapter();

            let upCourseName = () => {
                let courseName = data.tabList.filter(item => item.id == data.tabActiveName)[0].name;
                emit('upCourseName', courseName)
            }

            //获取科目列表数据
            let getVideoMyCoursesList = () => {
                videoMyCoursesList({courseID: localStorage.getItem('activeCourse')}).then(res => {
                    data.tabList = res.data
                    console.log('科目列表', res)
                    data.tabActiveName = String(res.data[0].id)
                })
            }

            getVideoMyCoursesList();

            //当前播放状态
            let activeState = (activeId) =>{
                for (let item of data.videoChapter){
                    if(item.courseVideos && item.courseVideos.length){
                        for (let children of item.courseVideos){
                            if(children.id == activeId){
                                console.log('当前属于章节下的',children);
                                return children;
                            }
                        }
                    }else{
                        for (let item2 of item.subsections){
                            if(item2.courseVideos && item2.courseVideos.length){
                                for (let children of item2.courseVideos){
                                    if(children.id == activeId){
                                        console.log('当前属于章节及小节下的',item2);
                                        return item2
                                    }
                                }
                            }
                        }
                    }
                }
            }

            let toVideo = (item) => {
                router.push({
                    name: 'VideoPlayer',
                    params: {
                        subject_id: localStorage.getItem('activeCourse'),
                        subject_name: localStorage.getItem('activeCourseName'),
                        id: item.id,
                        chapterID:data.tabActiveName
                    }
                })
            }

            watch(() => data.tabActiveName,() =>{
                if(data.tabActiveName){
                    // console.log('data.tabList',data.tabList.filter(item => item.id == Number(data.tabActiveName))[0]['name'])
                    data.subjectName = data.tabList.filter(item => item.id == Number(data.tabActiveName))[0]['name'];
                    emit('changeSubjectName',data.subjectName);
                    getVideoChapter();
                }
            })

            watch(() => props.activeCourse,() =>{
                getVideoMyCoursesList();
            })
            return {
                proxy,
                upCourseName,
                ...toRefs(data),
                toVideo
            }
        }
    }
</script>

<style scoped>
    .course-item {
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        align-items: center;
        line-height: 30px;
        margin-bottom: 5px;
        border-radius: 5px;
    }
    .course-item:hover{
        background-color: rgba(217, 235, 255, 1);
        cursor: pointer;
    }

    .course-item .name {

    }

    .course-item .time {
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
    }

    .course-title {

    }
</style>
